/*
  需求：给整个页面添加背景水印。

  思路：
    1、使用 canvas 特性生成 base64 格式的图片文件，设置其字体大小，颜色等。
    2、将其设置为背景图片，从而实现页面或组件水印效果

  使用：设置水印文案，颜色，字体大小即可
  <div v-waterMarker="{text:'版权所有',textColor:'rgba(180, 180, 180, 0.4)'}"></div>
*/

import type { Directive,DirectiveBinding } from 'vue'

const waterMarker:Directive = {
    mounted(el, binding: DirectiveBinding){
        const canvas = document.createElement('canvas')
        canvas.width = 205
        canvas.height = 140
        let can = canvas.getContext('2d') as CanvasRenderingContext2D
        can.rotate((-20*Math.PI)/180)
        can.font = binding.value.font || "16px Microsoft JhengHei"
        can.fillStyle = binding.value.textColor || "rgba(180, 180, 180, 0.3)"
        can.textAlign = 'left',
        can.textBaseline = 'middle'
        can.fillText(binding.value.text,canvas.width/10,canvas.height/2)
        el.style.backgroundImage = `url(${canvas.toDataURL("image/png")})`
    }
}

export default waterMarker